<template>
	<view class="sexAndAge">
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%;">
					
		</view>
		<view class="skip" @click="skip">
			跳过
		</view>
		<view class="sexAndAge-middle">
			<h1>选择你的性别和年龄</h1>
			<p>完善信息来个性化你的内容</p>
			<view class="sexAndAge-middle-sex">
				<view class="sexAndAge-middle-sex-left">
					<view class="sexAndAge-middle-sex-left-img">
						<img src="@/static/TestImg/img/sexAndAge/boy.jpg" ref="boy" @click="boy()">
						<p>男生</p>
					</view>

				</view>
				<view class="sexAndAge-middle-sex-right">
					<view class="sexAndAge-middle-sex-right-img">
						<img src="@/static/TestImg/img/sexAndAge/girl.jpg" ref="girl" @click="girl()">
						<p>女生</p>
					</view>
				</view>
			</view>
			<picker-view :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in columns" :key="index">{{ item }}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view class="sexAndAge-bottom">
			<u-button text="下一步" color="#ff2442" shape="circle" :disabled="disabled" @click="goIndex"></u-button>
		</view>
	</view>
</template>
<script>
	export default {
		created() {
			this.age();
		},
		mounted() {
			this.boy();
		},
		data() {
			return {
				columns: [],
				sex: "",
				year: "",
				show: true,
				columnss: [],
				value: [24],
				disabled: true,
				userAge: ""
			}
		},
		methods: {
			skip() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			bindChange(e) {
				if (e.detail.value[0] < 24) {
					this.userAge = e.detail.value[0]
					// console.log(this.userAge);
				};
				if (e.detail.value[0] > 24) {
					this.userAge = e.detail.value[0] - 1;
					// console.log(this.userAge);
				};
				if (e.detail.value[0] != 24) {
					this.disabled = false
				};
				if (e.detail.value[0] == 24) {
					this.disabled = true
				};

			},
			age() {
				for (let i = 0; i < 100; i++) {
					if (i < 25 && i > 23) {
						this.columns.push("上下滑动选择年龄");
					}
					this.columns.push(i);
				}
			},
			onChange(value, index) {
				// Toast(`当前索引：${index}`);
				this.year = index;
				if (this.year != 24) {
					this.interestBtn();
				}
			},
			boy() {
				this.$refs.boy.style.filter = "grayscale(0)";
				this.$refs.girl.style.filter = "grayscale(100)";
				this.sex = "男";
			},
			girl() {
				this.$refs.boy.style.filter = "grayscale(100)";
				this.$refs.girl.style.filter = "grayscale(0)";
				this.sex = "女";
			},
			interestBtn() {
				if (this.sex == "" && this.year == "") {
					this.$toast.fail("请选择你的性别和年龄");
				} else {
					this.$refs.sexAndAgeBottomBtn.style.backgroundColor = "#fb4a3e";
				}
			},
			goIndex() {
				let sex = this.sex;
				let userAge = this.userAge;
				uni.navigateTo({
					url: "/pages/login/Interest",
					success(res) {
						res.eventChannel.emit('Interest', {
							ser: sex,
							age: userAge
						});
					}
				})
			}
		}
	}
</script>
<style>
	.sexAndAge {
		width: 100%;
		height: 1600rpx;
		display: flex;
		flex-direction: column;
	}

	.sexAndAge-top {
		width: 100%;
		height: 8%;
		display: flex;
		justify-content: space-between;
	}

	.sexAndAge-top-left {
		width: 30%;
		height: 100%;
		background: url("@/static/TestImg/img/logo.jpg") center/cover no-repeat;
	}

	.sexAndAge-top-right {
		width: 30%;
		height: 100%;
	}

	.sexAndAge-top-right::before {
		content: '\e65f';
		font-family: "iconfont";
		font-size: 66rpx;
		text-align: center;
		display: block;
		margin-top: 10%;
		margin-left: 30%;
	}

	.sexAndAge-top-right-pop {
		width: 200rpx;
		height: 60rpx;
		border-radius: 32rpx;
		box-shadow: 2rpx 2rpx 0 0 rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: space-evenly;
	}

	.sexAndAge-top-right-pop span::before {
		content: '\e630';
		font-family: "iconfont";
		display: inline-block;
		font-size: 30rpx;
	}

	.sexAndAge-top-right-pop span {
		display: inline-block;
		margin-top: 6rpx;
		margin-left: 12rpx;
		position: relative;
		z-index: 6;
	}

	.sexAndAge-middle {
		width: 100%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.sexAndAge-middle h1 {
		margin-top: 10%;
		text-align: center;
	}

	.sexAndAge-middle p {
		text-align: center;
	}

	.sexAndAge-middle-sex {
		width: 100%;
		height: 30%;
		margin-top: 5%;
		display: flex;
		justify-content: space-evenly;
	}

	.sexAndAge-middle-sex-left-img,
	.sexAndAge-middle-sex-right-img {
		width: 200rpx;
		height: 200rpx;

	}

	.sexAndAge-middle-sex-right-img img,
	.sexAndAge-middle-sex-left-img img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		margin-top: 50%;
		object-fit: contain;
		object-fit: cover;
		filter: grayscale(100%);
	}

	.sexAndAge-middle-sex-left-img p,
	.sexAndAge-middle-sex-right-img p {
		text-align: center;
		margin-top: 20rpx;
	}


	.picker-view {
		width: 750rpx;
		height: 450rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.sexAndAge-bottom {
		margin-top: 150rpx;
	}

	.skip {
		width: 100%;
		padding: 10rpx 0;
		display: flex;
		justify-content: right;
		font-size: 35rpx;
	}
</style>